<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uTools多功能插件</title>
    <style>
      .notification-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
      }
      .notification-close {
        cursor: pointer;
        color: #6c757d;
      }
    </style>
    <!-- 本地引用Tailwind CSS -->
    <script src="assets/js/tailwind.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        neutral: '#F3F4F6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .sidebar-emoji {
                @apply w-6 text-center text-lg;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部提示区域 -->
    <div class="notification-banner" id="notificationBanner">
      <span>请通过右上角设置uTools的插件应用设置，打开"自动分离为独立窗口"</span>
      <span class="notification-close" onclick="document.getElementById('notificationBanner').style.display='none'">×</span>
    </div>
    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边菜单 -->
        <aside class="w-56 bg-white shadow-md hidden md:block">
            <nav class="py-4">
                <ul>
                    <li>
                        <a href="#" onclick="loadPage('pages/tongji/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">📅</span>
                            <span>PDF打印分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/chaifen/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">✂️</span>
                            <span>PDF拆分</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/hebing/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">📝</span>
                            <span>PDF合并</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/tupian/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">🖼️</span>
                            <span>PDF转图片</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/tu2word/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">📃</span>
                            <span>图片插入Word</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/pdf2word/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">➡️</span>
                            <span>PDF转Word</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="loadPage('pages/hebing/index.html')" class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 transition-colors">
                            <span class="sidebar-emoji">📝</span>
                            <span>待续</span>
                        </a>
                    </li>                     
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 overflow-hidden p-4 md:p-6 bg-gray-50">
            <div class="bg-white rounded-xl shadow-md h-full overflow-hidden">
                <iframe id="contentFrame" src="pages/tongji/index.html" class="w-full h-full border-0"></iframe>
            </div>
        </main>
    </div>

    <script>
        // 页面加载函数
        function loadPage(pageUrl) {
            // 更新活动菜单项
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.classList.remove('sidebar-item-active');
            });
            
            
            
            // 获取当前点击的菜单项
            const activeItem = event.currentTarget;
            activeItem.classList.add('sidebar-item-active');
            
            // 如果是移动菜单项，点击后关闭菜单
            if (activeItem.classList.contains('mobile-sidebar-item')) {
                document.getElementById('mobileMenu').classList.add('-translate-x-full');
            }
            
            // 加载页面
            document.getElementById('contentFrame').src = pageUrl;
        }
        
        
        
        // 关闭按钮 - 在uTools中关闭插件
        document.getElementById('closeBtn').addEventListener('click', function() {
            if (window.utools) {
                utools.outPlugin();
            }
        });
        
        // 初始化 - 设置第一个菜单项为活动状态
        document.addEventListener('DOMContentLoaded', function() {
            const firstSidebarItem = document.querySelector('.sidebar-item');
            if (firstSidebarItem) {
                firstSidebarItem.classList.add('sidebar-item-active');
            }
            
            
        });
    </script>
</body>
</html>